<template>
  <div>
    <div class="hottop">
      <div class="banner">
        <div class="hotbanner"></div>
        <div class="hottime">更新日期：{{ month + 1 }}月{{ day }}日</div>
      </div>
      <ul>
        <div>
          <li
            class="songlist"
            v-for="(item, index) in songlistData"
            :key="item.id"
            @click="selectPlayList(item)"
          >
            <div class="songnumitem">
              <span class="songnum" v-if="index < 9">0{{ index + 1 }}</span>
              <span class="songnum" v-else>{{ index + 1 }}</span>
              <div class="songlistitem">
                <span class="songname"
                  >{{ item.name }}
                  <!-- {{item.song.artists[0].name}} -->
                </span>
                <br />
                <span
                  class="singername"
                  v-for="singers in item.artists"
                  :key="singers.id"
                >
                  {{ singers.name }}
                </span>
              </div>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <div class="mini-palyer-container" v-if="playsongname != ''">
      <img class="playicon" :src="songpicurl" alt="" />
      <div class="text" @click="selectMiniPlayer(selectid)">
        <span class="playertext-name">{{ playsongname }}</span>
        <span class="playertext-singer">{{ playsongsinger }}</span>
      </div>
      <!-- 播放图标 -->
      <div class="control">
        <audio :src="musicurl" @ended="overAudio" autoplay ref="audio"></audio>
        <div>
          <div class="play" v-if="isPlay">
            <i class="iconfont icon-bofang1"></i>
            <span @click="playAudio">Stop</span>
          </div>
          <div class="play" v-else>
            <i class="iconfont icon-zanting1" @click="pauseAudio"></i>
            <span @click="playAudio">Play</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songlistData: [],
      selectid: "",
      day: "",
      month: "",
      playsongname: "",
      playsongsinger: "",
      songpicurl: "",
      musicurl: "",
      isPlay: false,
    };
  },
  created() {
    this.getSonglist();
    this.getTime();
    
  },
  methods: {
    getSonglist() {
      axios
        .get("http://171.220.242.237:3001/top/song?type=0")
        .then((res) => {
          console.log(res.data.result);
          this.songlistData = res.data.data;
          // this.playsongname1=res.data.data[0].name
          // console.log(this.playsongsinger1)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getTime() {
      var date = new Date();
      this.day = date.getDate();
      this.month = date.getMonth();
    },
    selectPlayList(item) {
      console.log("before----------------" + this.isPlay);
      this.isPlay = true;
      console.log("after----------------" + this.isPlay);
      const id = item.id;
      this.selectid = item.id;
      this.playsongname = item.name;
      this.playsongsinger = item.artists[0].name;
      // console.log("---------"+this.playsongname)
      //点击歌曲列表，获得歌曲的ID然后通过ID拿到点击歌曲的URL地址
      axios.get("http://171.220.242.237:3001/song/url", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          // console.log(res.data.data);
          this.musicurl = res.data.data[0].url;
          // console.log(res.data.data[0].url)
        })
        .catch((err) => {
          console.error(err);
        });
      //点击歌曲列表，获得歌曲的ID然后通过ID拿到点击歌曲的图片URL地址
      axios.get("http://171.220.242.237:3001/song/detail", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          console.log(res.data.songs[0].al.picUrl);
          this.songpicurl = res.data.songs[0].al.picUrl;
        });
    },
    //播放
    playAudio() {
      // let audio = this.audio = document.getElementById('audio')
      let audio = this.$refs.audio;
      //   let audio = this.$refs.audio;
      console.log("time---------" + audio.currentTime);
      if (audio.paused) {
        audio.play();
        this.isPlay = true;
      } else {
        audio.pause();
        this.isPlay = false;
      }
      console.log("-------------------------");
    },
    //暂停音频
    pauseAudio() {
      this.audioPlayShow = true;
      let audio = document.getElementById("audio");
      audio.pause();
    },
    //音频播放完的时候
    overAudio() {
      this.audioWidth = this.$refs.line.offsetWidth;
      this.audioIsOver = true;
      this.pauseAudio();
    },
    selectMiniPlayer(selectid) {
      const id = selectid;
      console.log(id);

      const musicurl=this.musicurl;

      let audio = this.$refs.audio;
      const bofangtime = audio.currentTime
      console.log("time---------" + audio.currentTime);
      this.$router.push({
        name: "PlayerS",
        params: { id , bofangtime,musicurl},
      });
    },
  },
};
</script>
<style scoped>
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  overflow: hidden;
}
.playertext-name {
  margin-bottom: 2px;
  font-size: 17px;
  color: rgb(7, 14, 121);
}
.playertext-singer {
  font-size: 15px;
  color: rgb(139, 139, 184);
}

.playicon {
  margin-left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.control {
  flex: 0 0 30px;
  padding: 0 10px;
  color: #d44439;
  margin-right: 30px;
}
.mini-palyer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: rgb(136, 96, 96);
  border-radius: 10px;
  /* padding: 5px; */
}
/* 列表的样式 */
.songnumitem {
  display: flex;
}
.songlistitem {
  text-align: left;
  margin-bottom: 10px;
  border-bottom: rgb(231, 225, 225) 0.1px solid;
  width: 100%;
}
.songlist {
  text-align: left;
  padding: 0 0 0 10px;
}
.songname {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif, STHeiTi;
  line-height: 1.5;
  color: #333;
}
.singername {
  font-size: 12px;
  color: #888;
  font-family: Arial, Helvetica, sans-serif;
}
.songnum {
  color: #df3436;
  margin-top: 15px;
  margin-right: 15px;
}
.banner {
  overflow: hidden;
  width: 100%px;
  height: 192.08px;
  background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=)
    no-repeat;
  background-size: contain;
  padding: 0 0 0 20px;
  content: "";
  z-index: 1;
}
.hotbanner {
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
    no-repeat;
  background-size: 166px 97px;
  width: 142px;
  height: 67px;
  margin-top: 10%;
  background-position: -24px -30px;
}
</style>